Images, media, and form elements

图像、媒体和表单元素

图像和视频被描述为替换元素（replaced element）。CSS 不能影响它们的内部布局——而仅影响它们在页面上相对于其他元素的位置。

调整图像大小

处理溢出问题一个是用max-width，

还有就是用object-fit，fill,contain,cover,none,scale-down(内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。)

.cover {
  object-fit: cover;
}

<div class="wrapper">
  <div class="box"><img src="balloons.jpg" alt="balloons" class="cover"></div>
  <div class="box"><img src="balloons.jpg" alt="balloons" class="contain"></div>
</div>

布局中的替换元素

替换元素在成为网格或者弹性布局的一部分时，有不同的默认行为，图像不会被拉伸，而会对齐到网格区域或者弹性容器的起始处。

form元素

很多表单控件是通过 <input> 元素添加到网页上的。该元素定义了简单的表单区域，例如文字输入。更进一步还有 HTML5 新加入的更加复杂的区域，例如颜色和日期撷取器。另外还有一些其他元素，例如用于多行文本输入的 <textarea>，以及那些用来包含和标记表单特定部分的元素，例如 <fieldset> 和 <legend> 。

HTML5 还包含了允许 Web 开发者指定必填区域的特性，甚至还能检验填入内容的类型。如果用户输入了一些不符合要求的内容，或者未填写必填区域，浏览器会显示错误提示。不同的浏览器在给此类元素样式化和自定义方面不尽相同。

继承和表单元素

在一些浏览器中，表单元素默认不会继承字体样式，如果需要你要加入以下规则：、

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
}

form元素与box-sizing

盒模型课中学了box-sizing。为了保证统一，最好将所有元素的内外边距都设为 0，然后在单独进行样式化控制的时候将这些加回来。

button,
input,
select,
textarea {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

其他有用的设置

除了上面提到的规则以外，你也应该在 <textarea> 上设置 overflow: auto 以避免 IE 在不需要滚动条的时候显示滚动条：

textarea {
  overflow: auto;
}

将一切都放在一起“重置”

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

textarea {
  overflow: auto;
}

备注

通用样式表被许多开发者用作所有项目的一系列基础样式，典型就是那些做了和以上提到相似的事情的那些，在你开始自己的 CSS 作业前，它确保了跨浏览器的任何事情都被默认设定为统一样式。它们不像以往那么重要了，因为浏览器显著地要比以往更加统一。但是，如果你想要看一个例子，可以看看这个Normalize.css，它被许多项目用作基础，是非常流行的样式表。

至于样式化表单的更加深入的信息，可以看下这些教程的 HTML 一节的这两篇文章：

• Styling HTML Forms
• Advanced Styling for HTML Forms